<template>
	<view class="page">
		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 教练信息卡片 -->
			<view class="coach-card">
				<view class="coach-info">
					<image class="coach-avatar" :src="coachAvatar" mode="aspectFill"></image>
					<view class="coach-detail">
						<view class="coach-name-wrap">
							<text class="coach-name">陈教练</text>
							<uni-icons type="contact" size="20" color="#3b82f6"></uni-icons>
						</view>
						<text class="coach-phone">电话：138 **** 5678</text>
						<view class="coach-tag">
							<text class="tag-text">教龄 5 年</text>
						</view>
					</view>
					<view class="exchange flex-center flex-column " @click="show = true">
						<van-icon name="exchange" size="16" />
						切换
					</view>
				</view>
			</view>

			<!-- 搜索和筛选区 -->
			<view class="search-section">
				<view class="search-wrap">
					<!-- <input type="text" v-model="searchText" placeholder="搜索课程" @input="onSearch" /> -->
					<u-search placeholder="搜索课程" v-model="searchText" :showAction="false"></u-search>
				</view>
				<view class="filter-wrap">
					<view class="view-toggle">
						<view v-for="(view, index) in viewOptions" :key="index"
							:class="['toggle-btn', currentView == view.value? 'active' : '']"
							@click="currentView = view.value">
							<text>{{ view.label }}</text>
						</view>
					</view>
					<!-- <select v-model="courseType">
						<option v-for="type in courseTypes" :value="type.value">{{ type.label }}</option>
					</select> -->
				</view>
			</view>

			<view class="course-list" v-if="currentView === 'list'">
				<view v-for="(course, index) in courseList" :key="index" class="course-item"
					@click="oncourse(course, index)">
					<view class="course-main">
						<view class="course-time">
							<text class="time-tag">{{ course.date }} {{ course.weekday }}</text>
							<text class="period-tag">{{ course.time }}</text>
						</view>
						<text class="course-name">{{ course.name }}</text>
						<view class="course-tags">
							<view class="info-tag">
								<uni-icons type="file" size="14" color="#666"></uni-icons>
								<text>{{ course.classId }}</text>
							</view>
							<view class="info-tag purple">
								<uni-icons type="person" size="14" color="#9333ea"></uni-icons>
								<text>{{ course.className }}</text>
							</view>
							<view class="info-tag amber">
								<uni-icons type="staff" size="14" color="#d97706"></uni-icons>
								<text>{{ course.coachName }}</text>
							</view>
						</view>
					</view>
					<view class="course-status">
						<text :class="['status-tag', course.status === '已签到'? 'signed' : 'unsigned']">
							{{ course.status }}
						</text>
						<view class="attendance">
							<text>应到 {{ course.expectedCount }} 人</text>
							<text>实到 {{ course.actualCount || 0 }} 人</text>
							<text>假 {{ course.actualCount || 0 }} 人</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<!-- <attend-calendar :lateddates='lateddates' :truancyeddates='truancyeddates' :chidaodates='chidaodates'
					@on-click="handleChildClick">
				</attend-calendar> -->
				<view class="calendar">
					<view class="top-bar">
						<view class="" style="display: flex;height: 70upx;flex-direction: row;  justify-content:  space-between;">
							<view class="" style="display: flex;height: 70upx;">
								<view class="top-bar-ym">{{ y }}{{ text.year }}{{ m + 1 }}{{ text.month }}</view>
								<view class="top-bar-ym1">已签到 18 / 总课时 45</view>
							</view>
							<view class="" style="display: flex;height: 70upx;">
								<image class="top-change-month" @click="turning('prev')"
									src="https://oss.szsportscenter.cn/img/zx12.png"></image>
								<image class="top-change-month" @click="turning('next')"
									src="https://oss.szsportscenter.cn/img/zx13.png"></image>
							</view>
						</view>
					</view>

					<view class="week">
						<view class="week-day" v-for="(item, index) in weekDay" :key="index">{{ item }}</view>
					</view>

					<view :class="{ hide: !monthOpen }" class="content" :style="{ height: height }">
						<view :style="{ top: positionTop + 'upx' }" class="days">
							<view class="item" v-for="(item, index) in dates" :key="index">
								<view class="day" @click="selectOne(item)"
									:class="{ choose: choose == `${item.year}-${item.month + 1}-${item.date}`}">
									{{ item.date }}
								</view>
								<view class="late2" v-if="isTruancyed(item.year, item.month + 1, item.date)"></view>
								<view class="late1" v-if="omcddates(item.year, item.month + 1, item.date)"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="course-list" style="margin-top: 20rpx;">
					<view v-for="(course, index) in courseList" :key="index" class="course-item"
						@click="oncourse(course, index)">
						<view class="course-main">
							<view class="course-time">
								<text class="time-tag">{{ course.date }} {{ course.weekday }}</text>
								<text class="period-tag">{{ course.time }}</text>
							</view>
							<text class="course-name">{{ course.name }}</text>
							<view class="course-tags">
								<view class="info-tag">
									<uni-icons type="file" size="14" color="#666"></uni-icons>
									<text>{{ course.classId }}</text>
								</view>
								<view class="info-tag purple">
									<uni-icons type="person" size="14" color="#9333ea"></uni-icons>
									<text>{{ course.className }}</text>
								</view>
								<view class="info-tag amber">
									<uni-icons type="staff" size="14" color="#d97706"></uni-icons>
									<text>{{ course.coachName }}</text>
								</view>
							</view>
						</view>
						<view class="course-status">
							<text :class="['status-tag', course.status === '已签到'? 'signed' : 'unsigned']">
								{{ course.status }}
							</text>
							<view class="attendance">
								<text>应到 {{ course.expectedCount }} 人</text>
								<text>实到 {{ course.actualCount || 0 }} 人</text>
								<text>假 {{ course.actualCount || 0 }} 人</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="calendar-view" v-else>
				<view class="calendar-header">
					<view class="calendar-title">
						<text class="month-text">{{ currentMonthText }}</text>
						<text class="attendance-text">已签到 18 / 总课时 45</text>
					</view>
					<view class="calendar-nav">
						<view class="nav-btn" @click="previousMonth">
							<uni-icons type="left" size="16" color="#666"></uni-icons>
						</view>
						<view class="nav-btn" @click="nextMonth">
							<uni-icons type="right" size="16" color="#666"></uni-icons>
						</view>
					</view>
				</view>

				<view class="calendar-grid">
					<view class="weekday-row">
						<text v-for="day in weekDays" :key="day" class="weekday">{{ day }}</text>
					</view>
					<view class="date-grid">
						<view v-for="date in 31" :key="date" class="date-cell" @click="toggleDateSelection(date)">
							<view :class="['date-content', selectedDate === date? 'selected' : '']">
								<text class="date-number">{{ date }}</text>
								<view v-if="getCoursesCount(date)" class="date-dot"></view>
							</view>
							<view v-if="selectedDate === date && monthCourses[date]" class="course-popup">
								<view v-for="(course, idx) in monthCourses[date]" :key="idx" class="popup-course">
									<text class="popup-name">{{ course.name }}</text>
									<text class="popup-time">{{ course.time }}</text>
									<text class="popup-class">{{ course.classId }} {{ course.className }}</text>
									<text class="popup-date">日期：{{ date }}号</text>
									<view class="popup-footer">
										<view class="popup-count">
											<text>应 {{ course.expectedCount }} 人</text>
											<text>实 {{ course.actualCount || 0 }} 人</text>
											<text>假 {{ course.actualCount || 0 }} 人</text>
										</view>
										<text :class="['popup-status', course.status === '已签到'? 'signed' : 'unsigned']">
											{{ course.status }}
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 班级详情弹窗 -->
		<u-popup @touchmove.stop :show="enrollDetailPopup" @close="closeInfo" closeOnClickOverlay mode="center"
			:safeAreaInsetBottom="false" round="10">
			<scroll-view class="storepopup" style="height: 70vh;padding: 20rpx 20rpx;width: 600rpx;" scroll-y>
				<view class="title flex-between">
					<text>课程信息</text>
					<u-icon @click="closeInfo" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<view class="enroll-detail-popup">
					<view class="enroll-detail-title">
						<view class="">
							课程详情
						</view>
						<view class="tag flex-align"
							style="font-size: 22rpx;color: #2F75FA;background-color: #d5e3fe;border-radius: 8rpx;padding: 5rpx 10rpx;margin-left: 20rpx;">
							待上课
						</view>
					</view>
					<view class=""
						style="background-color: #f4f4f4;padding: 30rpx;border-radius: 10rpx;width: 96%;margin-left: 2%;margin-top: 20rpx;font-size: 24rpx;display: flex;flex-direction: row;  justify-content: space-between;">
						<view class="">
							<view class="">
								2月20号
							</view>
							<view class="">
								09:00-10:00
							</view>
							<view class="">
								瑜伽馆A区
							</view>
						</view>
						<view class="" style="text-align: right;">
							<view class="">
								班级信息
							</view>
							<view class="">
								晨练A班
							</view>
							<view class="">
								应道15人
							</view>
						</view>
					</view>
					<view class=""
						style="background-color: #f4f4f4;padding: 30rpx;border-radius: 10rpx;width: 96%;margin-left: 2%;margin-top: 20rpx;font-size: 24rpx;display: flex;flex-direction: row;  justify-content: space-between;">
						<view class="">
							<view class="">
								课程类型
							</view>
							<view class="">
								瑜伽课程
							</view>
						</view>
						<view class="" style="" style="text-align: right;">
							<view class="">
								余科信息
							</view>
							<view class="">
								剩余12节课
							</view>
							<view class="">
								课程包：高级私教课程30节
							</view>
						</view>
					</view>

					<view class=""
						style="background-color: #f4f4f4;padding: 30rpx;border-radius: 10rpx;width: 96%;margin-left: 2%;margin-top: 20rpx;font-size: 24rpx;">
						<view class="">
							实到学员名单0人
						</view>
						<!-- <view class="">
							课程未开始，暂无签到记录
						</view> -->
						<view v-for="item in 5"
							style="background-color: #ffffff;padding: 20rpx;border-radius: 10rpx;width: 100%;margin-top: 20rpx;font-size: 24rpx;display: flex; flex-direction: row; justify-content: space-between; align-items: center; ">
							<view class="" style="display: flex; flex-direction: row; align-items: center; ">
								<view class="">
									<image style="width: 50rpx;height: 50rpx;border-radius: 50% 50%;"
										src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/a9/fb76483ea77de70d5d3234ca72d639.jpg?attname=%E8%A7%A3%E8%AF%B4%E5%A4%B4%E5%83%8F+%283%29.jpg"
										mode=""></image>
								</view>
								<view class="" style="display: flex; flex-direction: column;margin-left: 10rpx;">
									<view class="">
										陈思远
									</view>
									<view class="">
										m12534561215
									</view>
								</view>
							</view>
							<view class="">
								<view class="">
									剩余15课时
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<van-popup closeable :show="show" round position="bottom" @close="show = false">
			<view class="good-box">
				<view class="title">
					切换场馆
				</view>
				<view class="good-list">
					<view class="good-item" v-for="(item,index) in venuelist" :key="index" @click="onChangelist(item)">
						<view class="flex-align">
							<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								v-if="item.venue_thumb != ''" :src="item.venue_thumb" />
							<van-image v-else width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								src="https://img.yzcdn.cn/vant/cat.jpeg" />
							<view class="info">
								<view class="name">{{item.venue_name}}</view>
								<view class="flex-align" v-if="item.project_list != ''">
									<view class="tag" v-if="item.project_list[0].name != ''">
										{{item.project_list[0].name}}
									</view>
									<view class="tag" v-if="item.project_list[1].name != '' && item.project_list[1]">
										{{item.project_list[1].name}}
									</view>
									<view class="tag" v-if="item.project_list[2].name != ''&& item.project_list[2]">
										{{item.project_list[2].name}}
									</view>
								</view>
								<view class="address">{{item.address}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				coachAvatar: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/782cf5cde63dddaa6434ab862fc4808066e329b2.png',
				searchText: '',
				currentView: 'list',
				courseType: '',
				viewOptions: [{
						label: '列表视图',
						value: 'list'
					},
					{
						label: '日历视图',
						value: 'calendar'
					}
				],
				courseTypes: [{
						label: '全部课程',
						value: 'all'
					},
					{
						label: '力量训练',
						value: 'strength'
					},
					{
						label: '有氧运动',
						value: 'cardio'
					},
					{
						label: '瑜伽',
						value: 'yoga'
					}
				],
				weekDays: ['日', '一', '二', '三', '四', '五', '六'],
				currentDate: new Date(),
				monthCourses: {
					15: [{
							name: '初级力量训练',
							time: '09:00-10:30',
							classId: 'ST001',
							expectedCount: 15,
							actualCount: 13,
							status: '已签到',
							className: '第一期'
						},
						{
							name: '瑜伽基础',
							time: '14:00-15:30',
							classId: 'YG001',
							expectedCount: 12,
							actualCount: 0,
							status: '未开始',
							className: '第二期'
						}
					],
					20: [{
						name: '高强度循环训练',
						time: '10:00-11:30',
						classId: 'HI001',
						expectedCount: 10,
						actualCount: 8,
						status: '已签到',
						className: '第三期'
					}]
				},
				selectedDate: null,
				courseList: [{
						name: '初级力量训练',
						time: '09:00-10:30',
						date: '2024年1月15日',
						weekday: '周一',
						classId: 'ST001',
						expectedCount: 15,
						actualCount: 13,
						status: '已签到',
						className: '第一期',
						coachName: '陈教练'
					},
					{
						name: '进阶瑜伽',
						time: '11:00-12:30',
						date: '2024年1月15日',
						weekday: '周一',
						classId: 'YG002',
						expectedCount: 12,
						actualCount: 0,
						status: '未开始',
						className: '第二期',
						coachName: '王教练'
					},
					{
						name: '高强度循环训练',
						time: '14:00-15:30',
						date: '2024年1月16日',
						weekday: '周二',
						classId: 'HI003',
						expectedCount: 10,
						actualCount: 8,
						status: '已签到',
						className: '第三期',
						coachName: '李教练'
					},
					{
						name: '核心训练',
						time: '16:00-17:30',
						date: '2024年1月16日',
						weekday: '周二',
						classId: 'CR004',
						expectedCount: 8,
						actualCount: 0,
						status: '未开始',
						className: '第四期',
						coachName: '陈教练'
					}
				],
				enrollDetailPopup: false,
				venuelist: [], //场馆列表
				chidaodates: ['2025-7-25', '2025-7-3', '2025-7-18', ],
				truancyeddates: ['2025-4-25', '2025-4-18', '2025-4-20', '2025-5-11', '2025-5-8', '2025-5-20'],
				text: {
					year: '年',
					month: '月',
					week: ['一', '二', '三', '四', '五', '六', '日'],
					today: '今'
				},
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth(), // 月
				dates: [], // 当前月日期集合
				positionTop: 0,
				monthOpen: true,
				choose: '',
			};
		},
		created() {
			this.dates = this.monthDay(this.y, this.m) 
			!this.open && this.trgWeek()
		},
		mounted() {
			let date = new Date()
			let y = date.getFullYear()
			let m = date.getMonth()
			let d = date.getDate()
			this.choose = `${y}-${m + 1}-${d}`
		},
		computed: {
			currentMonthText() {
				return `${this.currentDate.getFullYear()}年${this.currentDate.getMonth() + 1}月`;
			},
			// 顶部星期栏目
			weekDay() {
				return this.text.week.slice(this.weekstart - 1).concat(this.text.week.slice(0, this.weekstart - 1))
			},
			height() {
				return (this.dates.length / 7) * 80 + 'upx'
			}
		},
		onLoad() {
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			this.itemChooselist = this.venuelist[0]

		},
		methods: {
			// 获取当前月份天数
			monthDay(y, m) {
				let firstDayOfMonth = new Date(y, m, 1).getDay() // 当月第一天星期几
				let lastDateOfMonth = new Date(y, m + 1, 0).getDate() // 当月最后一天
				let lastDayOfLastMonth = new Date(y, m, 0).getDate() // 上一月的最后一天
				let dates = [] // 所有渲染日历
				let weekstart = this.weekstart == 7 ? 0 : this.weekstart // 方便进行日期计算，默认星期从0开始
				for (let j = 1; j <= lastDateOfMonth; j++) {
					dates.push({
						date: j,
						day: (j % 7) + firstDayOfMonth - 1 || 7,
						month: m,
						year: y,
						lm: true
					})
				}
				return dates
			},
			// 迟到处理
			isLateed(y, m, d) {
				let flag = false
				for (let i = 0; i < this.lateddates.length; i++) {
					let dy = `${y}-${m}-${d}`
					if (this.lateddates[i] == dy) {
						flag = true
						break
					}
				}
				return flag
			},
			// 旷课处理
			isTruancyed(y, m, d) {
				let flag = false
				for (let i = 0; i < this.truancyeddates.length; i++) {
					let dy = `${y}-${m}-${d}`
					if (this.truancyeddates[i] == dy) {
						flag = true
						break
					}
				}
				return flag
			},

			omcddates(y, m, d) {
				let flag = false
				for (let i = 0; i < this.chidaodates.length; i++) {
					let dy = `${y}-${m}-${d}`
					if (this.chidaodates[i] == dy) {
						flag = true
						break
					}
				}
				return flag
			},

			isToday(y, m, d) {
				let date = new Date()
				return y == date.getFullYear() && m == date.getMonth() && d == date.getDate()
			},
			// 切换成周模式
			trgWeek() {
				this.monthOpen = !this.monthOpen
				if (this.monthOpen) {
					this.positionTop = 0
				} else {
					let index = -1
					this.dates.forEach((i, x) => {
						this.isToday(i.year, i.month, i.date) && (index = x)
					})
					this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 80
				}
			},
			// 点击回调
			selectOne(i, event) {
				let date = `${i.year}-${i.month + 1}-${i.date}`
				this.choose = date
				console.log(this.choose, 'this.choose')
			},
			// 上个月，下个月
			turning(_action) {
				if (_action === 'next') {
					if (this.m + 1 == 12) {
						this.m = 0
						this.y = this.y + 1
					} else {
						this.m = this.m + 1
					}
				} else {
					if (this.m + 1 == 1) {
						this.m = 11
						this.y = this.y - 1
					} else {
						this.m = this.m - 1
					}
				}

				this.dates = this.monthDay(this.y, this.m)
			},
			// 日历点击
			handleChildClick(date) {
				console.log('父组件收到子组件的点击事件，日期为:', date);
				this.riqidate = date
				this.riliInfo = true
				this.dropdownmenu = false
				this.dropmenu = true
				this.products = []
				this.keyword = ''
			},
			oncourse(course, index) {
				this.enrollDetailPopup = true
			},
			closeInfo() {
				this.enrollDetailPopup = false
			},
			previousMonth() {
				const newDate = new Date(this.currentDate);
				newDate.setMonth(newDate.getMonth() - 1);
				this.currentDate = newDate;
			},
			nextMonth() {
				const newDate = new Date(this.currentDate);
				newDate.setMonth(newDate.getMonth() + 1);
				this.currentDate = newDate;
			},
			getCoursesCount(date) {
				return this.monthCourses[date]?.length || 0;
			},
			toggleDateSelection(date) {
				if (this.selectedDate === date) {
					this.selectedDate = null;
				} else {
					this.selectedDate = date;
				}
			},
			onSearch() {
				console.log('搜索内容:', this.searchText);
			},
			onChangelist(item) {
				this.itemChoose = item
				this.listQuery.pageNo = 1
				this.itemChooselist = this.itemChoose
				this.show = false
			},
		}
	};
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.page {
		min-height: 100%;
		background-color: #f9fafb;
		padding-bottom: 120rpx;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		z-index: 100;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.header-title {
		font-size: 32rpx;
		font-weight: 500;
		margin-left: 20rpx;
	}

	.content {
		padding: 20rpx 20rpx 0;
	}

	.coach-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.coach-info {
		display: flex;
		align-items: center;
	}

	.exchange {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.2);
		color: rgb(234, 248, 248);
		font-size: 24rpx;
	}

	.coach-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.coach-detail {
		margin-left: 32rpx;
		flex: 1;
	}

	.coach-name-wrap {
		display: flex;
		align-items: center;
	}

	.coach-name {
		font-size: 32rpx;
		font-weight: 500;
		margin-right: 16rpx;
	}

	.coach-phone {
		font-size: 28rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.coach-tag {
		margin-top: 16rpx;
	}

	.tag-text {
		background-color: #ebf5ff;
		color: #3b82f6;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 32rpx;
	}

	.search-section {
		margin-bottom: 32rpx;
	}

	.search-wrap {
		margin-bottom: 24rpx;
	}

	.filter-wrap {
		display: flex;
		gap: 16rpx;
		overflow-x: auto;
	}

	.view-toggle {
		display: flex;
		background-color: #fff;
		border-radius: 32rpx;
		padding: 4rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.toggle-btn {
		padding: 12rpx 32rpx;
		border-radius: 32rpx;
		font-size: 28rpx;
		color: #666;
	}

	.toggle-btn.active {
		background-color: #3b82f6;
		color: #fff;
	}

	.course-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.course-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;
	}

	.course-main {
		flex: 1;
	}

	.course-time {
		display: flex;
		gap: 16rpx;
		margin-bottom: 16rpx;
	}

	.time-tag {
		background-color: #f3f4f6;
		color: #666;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
	}

	.period-tag {
		background-color: #ebf5ff;
		color: #3b82f6;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
	}

	.course-name {
		font-size: 28rpx;
		font-weight: 500;
	}

	.course-tags {
		display: flex;
		gap: 16rpx;
		margin-top: 16rpx;
		flex-wrap: wrap;
	}

	.info-tag {
		display: flex;
		align-items: center;
		gap: 8rpx;
		background-color: #f3f4f6;
		color: #666;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
	}

	.info-tag.purple {
		background-color: #f3e8ff;
		color: #9333ea;
	}

	.info-tag.amber {
		background-color: #fef3c7;
		color: #d97706;
	}

	.course-status {
		margin-left: 32rpx;
		text-align: right;
	}

	.status-tag {
		display: inline-block;
		padding: 8rpx 24rpx;
		border-radius: 32rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.status-tag.signed {
		background-color: #dcfce7;
		color: #16a34a;
	}

	.status-tag.unsigned {
		background-color: #fef9c3;
		color: #ca8a04;
	}

	.attendance {
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #666;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.calendar-view {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.calendar-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.calendar-title {
		display: flex;
		align-items: center;
		gap: 24rpx;
	}

	.month-text {
		font-size: 32rpx;
		font-weight: 500;
	}

	.attendance-text {
		font-size: 24rpx;
		color: #666;
	}

	.calendar-nav {
		display: flex;
		gap: 16rpx;
	}

	.nav-btn {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.nav-btn:active {
		background-color: #f3f4f6;
	}

	.weekday-row {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 8rpx;
		margin-bottom: 8rpx;
	}

	.weekday {
		text-align: center;
		font-size: 24rpx;
		color: #666;
		padding: 16rpx 0;
	}

	.date-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 8rpx;
		position: relative;
	}

	.date-cell {
		position: relative;
	}

	.date-content {
		aspect-ratio: 1;
		border: 2rpx solid #e5e7eb;
		border-radius: 16rpx;
		padding: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.date-content.selected {
		border-color: #3b82f6;
		background-color: #ebf5ff;
	}

	.date-number {
		font-size: 24rpx;
		color: #666;
	}

	.date-dot {
		width: 8rpx;
		height: 8rpx;
		background-color: #3b82f6;
		border-radius: 50%;
		margin-top: 8rpx;
	}

	.course-popup {
		position: absolute;
		z-index: 10;
		left: 0;
		top: calc(100% + 16rpx);
		width: 480rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		border: 2rpx solid #e5e7eb;
		padding: 24rpx;
	}

	.popup-course {
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid #e5e7eb;
	}

	.popup-course:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}

	.popup-name {
		font-size: 28rpx;
		font-weight: 500;
	}

	.popup-time,
	.popup-class,
	.popup-date {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.popup-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}

	.popup-count {
		display: flex;
		gap: 16rpx;
		font-size: 24rpx;
		color: #666;
	}

	.popup-status {
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
	}

	.popup-status.signed {
		background-color: #dcfce7;
		color: #16a34a;
	}

	.popup-status.unsigned {
		background-color: #fef9c3;
		color: #ca8a04;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx 32rpx;
		background-color: #fff;
		border-top: 2rpx solid #e5e7eb;
	}

	.add-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	/deep/ .good-box {
		height: 60vh;
		padding: 0px 30rpx;
		display: flex;
		flex-direction: column;

		.title {
			color: #000;
			font-size: 30rpx;
			font-weight: 700;
			margin-top: 40rpx;
		}

		.van-radio__label {
			line-height: inherit;
		}

		.good-list {
			flex: 1;
			height: 0;
			overflow: auto;

			.good-item {
				margin-top: 30rpx;

				.info {
					margin-left: 25rpx;

					.address {
						color: #fff;
						padding-top: 20rpx;
						padding-right: 30rpx;
						height: 70rpx;

						&-name {
							font-size: 34rpx;
							font-weight: 700;
							line-height: 34rpx;
						}

						&-desc {
							margin-top: 18rpx;
							font-size: 22rpx;
							line-height: 22rpx;
						}

						.exchange {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							background-color: rgba(0, 0, 0, 0.2);
							color: rgb(234, 248, 248);
							font-size: 24rpx;
						}
					}

					.name {
						color: rgb(51, 51, 51);
						font-size: 30rpx;
						font-weight: 500;
						margin-bottom: 10rpx;
					}


					.tag {
						color: rgb(4, 179, 90);
						font-size: 24rpx;
						font-weight: 500;
						padding: 0px 10rpx;
						margin-right: 20rpx;
						background-color: rgba(4, 179, 90, 0.2);
						border-radius: 4rpx;

						&:nth-of-type(2) {
							color: rgb(236, 70, 246);
							background-color: rgba(236, 70, 246, 0.2);
						}
					}

					.address {
						margin-top: 10rpx;
						color: rgb(136, 136, 136);
						font-size: 22rpx;
					}
				}

			}
		}

		.footer {
			padding: 20rpx 0;
			background-color: rgb(255, 255, 255);

			.btn {
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				font-weight: 700;
				padding: 20rpx 0;
				text-align: center;
				background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
				border-radius: 60rpx;
			}
		}
	}

	.calendar {
		color: #000000;
		font-size: 28upx;
		text-align: center;
		// background-image: url('https://oss.szsportscenter.cn/img/zx11.png');
		// background-size: 100% 100%;
		background-color: #FFFFFF;
		// padding: 0 50upx 30upx 50upx;
		height: auto;

		.top-bar {
			display: flex;
			height: 70upx;

			>view {
				flex: 1;
			}

			.top-bar-ym {
				font-size: 32upx;
				height: 70upx;
				line-height: 70upx;
			}

			.top-bar-ym1 {
				font-size: 24upx;
				height: 70upx;
				line-height: 70upx;
				margin-left: 20rpx;
			}

			.top-change-month {
				// height: 80upx;
				// width: 80upx;
				// margin: 0 60upx;
				height: 40rpx;
				width: 40rpx;
				margin: 10px 20rpx;
			}
		}

		.week {
			display: flex;
			align-items: center;
			height: 70upx;
			line-height: 70upx;

			view {
				flex: 1;
			}

			.week-day {
				font-size: 24upx;
				// color: #A9C4FF;
				color: #000000;
			}
		}

		.content {
			position: relative;
			overflow: hidden;
			transition: height 0.4s ease;

			.days {
				transition: top 0.3s;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				position: relative;

				.item {
					position: relative;
					display: block;
					height: 70upx;
					line-height: 70upx;
					width: calc(100% / 7);

					.day {
						font-style: normal;
						display: inline-block;
						vertical-align: middle;
						width: 80rpx;
						height: 60rpx;
						line-height: 46rpx;
						overflow: hidden;
						border-radius: 14upx;
						border: 2rpx solid #e5e7eb;
						color: #000000;

						&.choose {
							// background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677 !important;
							border-color: #3b82f6;
							background-color: #ebf5ff;
							// background-size: 100% 100%;
							// background-image: url('https://oss.szsportscenter.cn/img/zx16.png') !important;
							color: #000000;
							// border-radius: 50%;
							width: 80rpx;
							height: 60rpx;
						}

						&.choose1 {
							// background-image: url('https://oss.szsportscenter.cn/img/zx17.png');
							// background-size: 100% 100%;
							background-color: rgb(216, 175, 161);
							width: 80rpx;
							height: 60rpx;
							color: #FFFFFF;
							// border-radius: 50%;
						}

						&.choose2 {
							// background-image: url('https://oss.szsportscenter.cn/img/zx18.png');
							background-size: 100% 100%;
							// background-image: url('https://oss.szsportscenter.cn/img/huo.gif') ;
							background-color: rgb(70, 166, 255);
							width: 80rpx;
							height: 60rpx;
							color: #FFFFFF !important;
							/* 确保文字颜色为白色 */
							// border-radius: 50%;
						}

						&.nolm {
							color: #f0f0f0;
							// opacity: 0.3;
						}
					}

					.late2 {
						bottom: 8rpx;
						left: 50%;
						font-style: normal;
						width: 12upx;
						height: 12upx;
						// background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
						background: #2658ff;
						border-radius: 6upx;
						position: absolute;
						margin-left: -6upx;
						pointer-events: none;
					}

					.late1 {
						bottom: 8rpx;
						left: 50%;
						font-style: normal;
						width: 12upx;
						height: 12upx;
						background: #ff0000;
						border-radius: 6upx;
						position: absolute;
						margin-left: -6upx;
						pointer-events: none;
					}

					.truancy {
						position: absolute;
						font-size: 20upx;
						font-weight: normal;
						width: 20upx;
						height: 20upx;
						line-height: 20upx;
						right: 10rpx;
						top: 10upx;
						color: #000000;
					}

					.today-text {
						position: absolute;
						font-size: 20upx;
						font-weight: normal;
						width: 20upx;
						height: 20upx;
						line-height: 20upx;
						right: 10rpx;
						top: 10upx;
						color: #000000;
					}
				}
			}
		}

		.hide {
			// height: 70upx !important;
		}

		.weektoggel {
			width: 70upx;
			height: 40upx;
			margin: 10upx auto 0;

			&.down {
				transform: rotate(180deg);
			}
		}
	}

	.choose2 {
		color: #FFFFFF !important;
	}
</style>